<template>
	<view class="custom-navbar" :style="{height:navHeight+'px',backgroundColor:backgroundColor}">
		<view class="custom-content-wrap" :style="{height:navHeight+'px',backgroundColor:backgroundColor}">
			<view class="custom-content" :style="{height:contentHeight+'px',lineHeight:contentHeight+'px',top:statusBarHeight+'px'}">
				<view @tap="onClickLeft" class="custom-left">
					<slot name="left" />
				</view>
				<view class='navbar-title'>
					{{navTitle}}
				</view>
				<view class="custom-right" @tap="onRightLeft">
					<slot name="right" />
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: "custom-nva-bar",
		props: {
			backgroundColor: {
				type: String,
				default: '#ffffff',
			},
			navTitle: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				navHeight: 0, //整个导航栏高度
				contentHeight: 0, //除去系统菜单后的高度
				statusBarHeight: 0 //菜单栏高度
			};
		},
		mounted() {
			let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取胶囊按钮
			console.log('胶囊信息', menuButtonObject)
		menuButtonObject.set
			uni.getSystemInfo({
				success: res => {
					console.log('系统信息', res)
					this.statusBarHeight = res.statusBarHeight;
					this.contentHeight = menuButtonObject.height + (menuButtonObject.top - this.statusBarHeight) * 2;
					this.navHeight = this.statusBarHeight + this.contentHeight;
				},
				fail(err) {
					console.log(err)
				}
			})
		},
		methods: {
			getNavHeight() {
				return this.navHeight
			},
			onClickLeft() {
				this.$emit('click-left')
			},
			onClickRight() {
				this.$emit('click-right')
			}


		}
	}
</script>

<style lang="scss" scoped>
	.custom-navbar {
		width: 100%;
		overflow: hidden;
		position: relative;
		top: 0;
		left: 0;
		z-index: 10;
		flex-shrink: 0;
		z-index: 100;

		.custom-content-wrap {
			position: fixed;
			width: 100%;
			
			.custom-content {
				width: 100%;
				position: absolute;
				padding: 0 20rpx;

				display: flex;

				.custom-left {
					z-index: 101;
				}

				.navbar-title {
					width: 100%;			
					position: absolute;
					box-sizing: border-box;
					text-align: center;
					color: #333;
					font-size: 36rpx;
					font-weight: 500;
				}

				.custom-right {
					z-index: 101;
				}
			}

		}





	}
</style>
